<template>
  <div class="refine_dproduce">
    <h2 class="titleblue">档案-履职标准</h2>

    <div class="contant">
      <!-- 查询条件 -->
      <div class="plan-operate">
        <div class="fr" v-if="activeName=='1'">
          <label>船籍港</label>
          <el-select clearable v-model="regPortName" @change='search(1)'>
            <el-option v-for="item in cjgOptions" :key="item.value" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <label>航区</label>
          <el-select clearable v-model="sailingAreaName" @change='search(1)'>
            <el-option v-for="item in hqOptions" :key="item.value" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <label>船舶种类</label>
          <el-select clearable v-model="typeNameCn" @change='search(1)'>
            <el-option v-for="item in cbOptions" :key="item.value" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="fr" v-if="activeName=='2'">
          <label>结构</label>
          <el-select clearable v-model="structure" @change="search(1)">
            <el-option v-for="item in jgOptions" :key="item.value" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <label>经营模式</label>
          <el-select clearable v-model="operationMode" @change="search(1)">
            <el-option v-for="item in jymsOptions" :key="item.value" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <label>泊位性质</label>
          <el-select clearable v-model="berthType" @change="search(1)">
            <el-option v-for="item in bwOptions" :key="item.value" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
        <div class="fr" v-if="activeName=='3'">
          <label>公司性质</label>
          <el-select clearable v-model="type" @change="search(1)">
            <el-option v-for="item in gsxzOptions" :key="item.value" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <label>管辖机构</label>
          <el-select clearable v-model="manageOrg" @change="search(1)">
            <el-option v-for="item in gxjgOptions" :key="item.value" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
          <label>体系内</label>
          <el-radio v-model="inSystem" label="2" @change="search(1)">全部</el-radio>
          <el-radio v-model="inSystem" label="1" @change="search(1)">是</el-radio>
          <el-radio v-model="inSystem" label="0" @change="search(1)">否</el-radio>

        </div>
        <div class="fr" v-if="activeName=='4'">
          <label>类别</label>
          <el-select clearable v-model="type2" @change="search(1)">
            <el-option v-for="item in lbOptions" :key="item.value" :label="item.name" :value="item.id">
            </el-option>
          </el-select>
        </div>
      </div>
      <!-- 内容 -->
      <el-tabs type="card" v-model="activeName" @tab-click="handleClick" style="margin-top: 20px;">
        <el-tab-pane label="烟台船籍港船舶" name="1">
          <router-view ref="portRegShip" name="PortRegShip" @update="search" :organization="organization" :cbOptions="cbOptions" :hqOptions="hqOptions" :cjgOptions="cjgOptions"></router-view>
        </el-tab-pane>
        <el-tab-pane label="泊位" name="2">
          <router-view ref="berth" name="Berth" @update="search" :dockOptions="dockOptions" :organization="organization" :bwOptions="bwOptions" :jgOptions="jgOptions" :jymsOptions="jymsOptions"></router-view>
        </el-tab-pane>
        <el-tab-pane label="航运公司" name="3">
          <router-view ref="transCompany" name="TransCompany" @update="search" :organization="organization" :gxjgOptions="gxjgOptions" :gsxzOptions="gsxzOptions"></router-view>
        </el-tab-pane>
        <el-tab-pane label="船员相关" name="4">
          <router-view ref="crew" name="Crew" @update="search" :organization="organization" :lbOptions="lbOptions"></router-view>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- 弹层 -->
  </div>
</template>

<script src="./DocProduce.js">
  export default {
    name: 'DocProduce'
  }
</script>

<style lang="scss">
  .refine_dproduce {
    width: 100%;
    .plan-operate label {
      margin: 0px 5px 0px 20px;
    }

    .el-tabs__header {
      margin: 0;
    }

    .add-icon {
      font-size: 30px;
      cursor: pointer;
      margin-top: 10px;
    }
  }

  .shipDetail {
    .lab-class {
      width: 15% !important;
      min-width: 100px;;
    }

    .select-width-220 {
      width: 70%;
    }

    .el-dialog__body {
      min-height: 500px;
    }
  }

  .dialogDetail {
    .lab-class {
      line-height: 40px;
      width: 200px;

      i {
        font-style: normal;
        color: red;

      }
    }

    .el-col-12 {
      margin-bottom: 15px;
    }

    .line-height-20 {
      line-height: 20px;
    }

    .footerbtn {
      padding: 50px 0 0;
    }

    .int-table {
      .el-table__body {
        width: auto !important;
      }
    }
  }
</style>
